<script setup lang="ts">
withDefaults(defineProps<Props>(), {
  lessonList: [],
})

// const emit = defineEmits(['select'])

interface Props {
  lessonList?: any
}
</script>

<template>
  <div class="flex flex-wrap">
    <a-checkbox v-for="(item, index) in lessonList" :key="index" v-model="item.selected" :value="item.lessonIndex" class="mb-8px mr-8px">
      <template #checkbox="{ checked }">
        <div
          class="custom-checkbox-card"
          :class="{ 'custom-checkbox-card-checked': checked }"
        >
          <a-space>
            <div className="custom-checkbox-card-mask">
              <div className="custom-checkbox-card-mask-dot" />
            </div>
            <div className="custom-checkbox-card-title">
              第{{ item.lessonIndex }}次课
            </div>
          </a-space>
          <div class="text-11px text-gray-5">
            {{ item.lessonDate }} {{ item.startTime }}-{{ item.endTime }}
          </div>
        </div>
      </template>
    </a-checkbox>
  </div>
</template>

<style scoped>
.custom-checkbox-card {
  padding: 4px 8px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 156px;
  box-sizing: border-box;
  background: white;
}

.custom-checkbox-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.custom-checkbox-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
